<template>
  <div>
    <div>
      <div  style="width: 600px;">
        <div class="flex justify-between align-center pt-2 pb-2">
          <div class="flex align-center font-black" style="font-size: 20px;">
            账单
          </div>
        </div>
        <div>
          <table class="table">
            <tr>
              <td>
                收费项目
              </td>
              <td>
                金额
              </td>
              <td>
                操作
              </td>
            </tr>
            <tr v-for="(payItem, index) in item.pay_items_json">
              <td>
                <a-input v-model="payItem.item_name" placeholder="输入费用项目名称"></a-input>
              </td>
              <td>
                <a-input-number
                    :max="1000000000"
                    placeholder="输入金额"
                    v-model="payItem.pay_price"
                />
              </td>
              <td>
                <a-popconfirm content="是否确认删除该项?" @ok="deleteItem(index)">
                  <a-button>删除</a-button>
                </a-popconfirm>
              </td>
            </tr>
            <tr>
              <td>
                <a-button @click="appendItem">增加费用项</a-button>
              </td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>合计</td>
              <td>{{ item.pay_price }}</td>
              <td></td>
            </tr>
          </table>
        </div>
        <div class="mt-5">
          备注: <a-textarea v-model="formModel.remark"></a-textarea>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {inject, ref} from "vue";
import {get, isArray} from "lodash";
import {toArray} from "lodash/lang";

const formModel = inject("formModel")
const appendItem = () => {
  item.value.pay_items_json.push({})
}
const deleteItem = (index) => {
  item.value.pay_items_json.splice(index, 1)
}
const item = ref({})
item.value = formModel.value
if (!isArray(item.value.pay_items_json)) {
  item.value.pay_items_json = toArray(item.value.pay_items_json)
}
item.value.pay_items_json.forEach(item => {
  item.pay_price = Number(item.pay_price)
})
</script>

<style scoped>
 .table,
th,
tr,
td {
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

.table {
  border-top: 1px solid rgba(0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0);
  width: 100%;
}

.table td {
  padding: 6px 10px;
  word-break: break-all;
  word-wrap: break-word;
}

.table tr td {
  border-right: 1px solid rgba(0, 0, 0);
  border-bottom: 1px solid rgba(0, 0, 0);
}
</style>
